<template>
<section class="page-container">
  <el-card class="box-card">
    <el-form :inline="true">
      <el-form-item style="margin-bottom: 0;">
        <el-input v-model="query.titleLk" placeholder="职位名称"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 0;">
        <el-input v-model="query.companyNameLk" placeholder="企业名称"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 0;">
        <el-button type="primary" v-on:click="getList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <br>
  <el-table :data="jobs" highlight-current-row v-loading="listLoading" style="width: 100%;">
    <el-table-column type="index" width="60" :index="getListIndex"></el-table-column>
    <el-table-column prop="companyName" label="公司名称" width="200"></el-table-column>
    <el-table-column prop="title" label="职位标题" width="200"></el-table-column>
    <el-table-column prop="createdAt" label="创建时间" width="200"></el-table-column>
    <el-table-column label="推荐日期" width="200">
      <template slot-scope="scope">
        {{scope.row.recommendDate | date}}
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button size="mini" type="primary" plain @click="recommend(scope.$index)">推荐首页</el-button>
        <el-button size="mini" type="warning" plain v-if="!!scope.row.recommendDate" @click="cancelRecommend(scope.$index)">取消推荐</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <el-pagination background layout="prev, pager, next" :page-size="query.pageSize"
    :total="query.total" :current-page="query.pageNo" @current-change="getPage"></el-pagination>
</section>
</template>
<script>
import * as Job from '@/api/job'

export default {
  data() {
    return {
      listLoading: false,
      jobs: [],
      query: { pageNo: 1, pageSize: 10, total: 0 }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.getPage(1)
      Job.count(this.query)
        .then(data => {
          this.query.total = data
        })
        .catch(ex => this.$message.error(ex.message))
    },
    getPage(page) {
      this.listLoading = true
      this.query.pageNo = page
      Job.getList(this.query)
        .then(data => {
          this.listLoading = false
          this.jobs = data
        })
        .catch(ex => {
          this.listLoading = false
          this.$message.error(ex.message)
        })
    },
    getListIndex(index) {
      return (this.query.pageNo - 1) * this.query.pageSize + index + 1
    },
    recommend(index) {
      Job.recommend(this.jobs[index].id)
        .then(data => {
          this.jobs[index].recommendDate = new Date()
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    },
    cancelRecommend(index) {
      Job.cancelRecomment(this.jobs[index].id)
        .then(data => {
          this.jobs[index].recommendDate = null
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    }
  }
}
</script>
